<template>
  <div class="sel-eva-posite">
    <el-dialog title="选择被评价岗位"
               @close="closeAdd"
               :visible.sync="newActiveDialog"
               width="40%"
               :rules="rules">
      <el-row>
        <el-form :model="requestParams"
                 :rules="rules"
                 ref="requestParams"
                 label-width="110px">
          <el-col :sapn="24">
            <el-form-item label="活动名称"
                          prop="title">
              <el-input v-model="requestParams.title"
                        placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :sapn="24">
            <el-form-item label="问卷名称"
                          prop="exercise_id">
              <el-select v-model="requestParams.exercise_id"
                         placeholder="请选择问卷名称">
                <el-option v-for="(option,index) in testListArr"
                           :key="index"
                           :value="option.exercise_id"
                           :label="option.exercise_name"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :sapn="24">
            <el-form-item label="选择评价人员">
              <el-radio v-model="requestParams.eva_person"
                        label="1">项目部</el-radio>
              <!-- <el-checkbox v-model="requestParams.eva_person">项目部</el-checkbox> -->
            </el-form-item>
          </el-col>
          <!-- @select-all="handleSelectionChange" -->
          <el-col :span="24">
            <el-table :data="projectJobArr"
                      height="300"
                      border
                      @select-all="handleSelectionChange"
                      @select="handleSelectionChange"
                      :row-key="getRowKeys"
                      ref="multipleTable"
                      :header-cell-style="{ background: '#f5f5f5' }"
                      style="width: 100%">
              <el-table-column type="selection"
                               :reserve-selection="true"
                               width="55">
              </el-table-column>
              <el-table-column type="index"
                               label="序号"
                               align="center"
                               width="60">
              </el-table-column>
              <el-table-column prop="name"
                               label="岗位名称"
                               show-overflow-tooltip
                               align="center">
              </el-table-column>
            </el-table>
          </el-col>
          <el-col :sapn="
                               24"
                  class="bottom-box">
            <el-button @click='onCancel'>取消</el-button>
            <el-button :type="requestParams.job_name==''?'info':'primary'"
                       :disabled="requestParams.job_name==''?true:false"
                       @click="onNext('requestParams')">下一步</el-button>
          </el-col>
        </el-form>

        <!-- 评价岗位 -->
        <EvaPoDialog v-if="childDialog==true"
                     :personRequestParams.sync="requestParams"
                     :childDialog.sync="childDialog"></EvaPoDialog>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { backEvaluateApi } from '@/services/ProjectCenter'
import { standardCodeApi } from "@/services/StandardCode";//标准码
import EvaPoDialog from './EvaPoDialog';
export default {
  components: {
    EvaPoDialog,//新增被评价人员
  },
  props: {
    callBack: Function,
    testListArr: {
      type: Array,
      default: () => {
        return []
      }
    },
    selEvaPoDialog: {
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  data () {
    return {
      getRowKeys (row) {
        return row.value
      },
      projectJobArr: [],
      childDialog: false,
      requestParams: {
        person_count: 0,
        title: '',
        exercise_id: '',
        eva_person: '1',//选择评价人员
        job_name: '',
        job_row: {},//岗位的对象
      },
      multipleSelection: [],
      rules: {
        title: [
          { required: true, message: '活动名称不能为空', trigger: ['change', 'blur'] }
        ],
        exercise_id: [
          { required: true, message: '问卷名称不能为空', trigger: ['change', 'blur'] }
        ]
      },
      newActiveDialog: false,
    }
  },
  methods: {
    toggleSelection (rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange (selection, row) {
      // 清除 所有勾选项
      this.$refs.multipleTable.clearSelection()
      // 当表格数据都没有被勾选的时候 就返回
      // 主要用于将当前勾选的表格状态清除
      if (selection.length == 0) return
      if (row.name) {//存在时执行
        this.requestParams.job_row = Object.assign({}, row);
        if (selection.length > 0) {
          this.requestParams.job_name = row.name
        } else {
          this.requestParams.job_name = ''
        }
      };
      this.$refs.multipleTable.toggleRowSelection(row, true);
      console.log('测试-row=', row, 'selection=', selection)
    },
    onNext (data) {//保存
      this.$refs[data].validate((valid) => {
        if (valid) {
          backEvaluateApi.getPersonNum({
            params: {
              is_page: 0,
              job_name: this.requestParams.job_name
            }
          }).then(res => {
            if (res.code == 0) {
              this.requestParams.person_count = res.data.person_count;
              this.childDialog = true;
            }
            console.log('res=', res)
          }).catch((error) => {
            console.log(error)
          })
          // this.closeAdd();
        } else {
          return false;
        }
      })
    },
    closeAdd () {
      this.$emit('update:selEvaPoDialog', false);
      this.$refs["requestParams"].resetFields();//表单重置
    },
    onCancel () {//取消
      this.closeAdd();//关闭弹框
    },
    getProJobData () {//项目部的岗位
      return standardCodeApi.getStandardCodeData({
        data: {
          code_type: 'projectJob'//项目部岗位
        }
      }).then((res) => {
        if (res.data) {
          let list = res.data.list;
          this.projectJobArr = list || [];
          window.localStorage.setItem('backToBackProjectJobArr', JSON.stringify(this.projectJobArr));
        }
      }).catch((error) => {
        console.log(error)
      })
    },
    commonFunc () {//通用函数
      let backToBackProjectJobArr = localStorage.getItem('backToBackProjectJobArr');
      if (backToBackProjectJobArr) {//存在
        this.projectJobArr = JSON.parse(backToBackProjectJobArr);//项目部岗位
      } else {
        this.getProJobData();//项目部下拉岗位
      }
    }

  },
  watch: {
    selEvaPoDialog (n, o) {
      if (n == true) {
        this.commonFunc();
        this.newActiveDialog = n;
      }
    },
    requestParams (n, o) {
      if (n.title == undefined) {
        this.onCancel();//取消
        this.callBack();//回调函数
      }
    }
  },
  created () {
    if (this.selEvaPoDialog == true) {
      this.commonFunc();
      this.newActiveDialog = this.selEvaPoDialog;
    }
  }
}
</script>

<style lang="scss" scoped>
.sel-eva-posite {
}
.bottom-box {
  margin-top: 20px;
  text-align: right;
}
</style>